安安，今天邁向day15，想來寫一個覺得相見恨晚的html模板語言：PUG。
認識了它，會覺得未來非常的美好，幫助了在偉大的航道不少忙，感謝有他的誕生!!!

PUG是蝦米?

前處理語言：我們打的縮寫語法，會幫我們進行前處理轉換成瀏覽器看得懂的語法。
（簡單來說就是充當翻譯？）

在新手時期寫html結構的時候啊～會發生以下狀況：
撰寫HTML的時候一定要開頭跟結尾標籤，但容易導致效率不好或是出錯的狀況，再來當你要除錯或是找一個標籤的時候，需要花超多時間跟眼力的啊！ （因為結構看起來超級多，可讀性不佳

但是！PUG就是要出來拯救我們的（跪

直接來看使用PUG的優點：

請看以下這個程式碼，上圖是原本的html，下圖是使用PUG編寫的，可以發現到

1.架構變得簡潔、好觀看（對於強迫症的人來說超舒服的吧(*´∀`)~♥

2.不需再擔心忘記開頭結尾標籤，除錯快速。

<ul class="personlist">
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
</ul>

ul.personlist
  .person
    h3 名字
    p 介紹
  .person
    h3 名字
    p 介紹
  .person
    h3 名字
    p 介紹

你看看！！！
是不是變得超簡潔ＲＲＲ～～～（轉圈）

那接下來就來學習怎麼編寫PUG囉！d(`･∀･)b

➤標籤內的文字怎麼寫？

tag+空白 後面就能打文字

<h2>pug前處理語言</h2>
// 轉換成 PUG
h2 pug前處理語言

➤class與id名稱如何表示？
class與id直接寫在tag後面，跟原本一樣，class使用 . ，id使用 #

<h2 class="title red">pug前處理語言</h2>
<div id="test">測試</div>
// 轉換成 PUG
h2.title.red pug前處理語言
#test 測試

➤層級寫法

透過“縮排”方式，來控制誰在誰的裡面

<h2 class="title red">pug前處理語言<sapn class="smallTexT">小文字</span></h2>
// 透過縮排控制誰在誰裡面
// 轉換成 PUG
h2.title.red pug前處理語言
	span.smallText 小文字
// 縮排表示span在h2裡面

➤列表式寫法

<ul class="personlist">
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
  <li class="person">
    <h3>名字</h3>
    <p>介紹</p>
  </li>
</ul>

ul.personlist
  .person
    h3 名字
    p 介紹
  .person
    h3 名字
    p 介紹
  .person
    h3 名字
    p 介紹

上圖原本，下圖轉換成PUG

➤連結a跟圖片img

<a href="網址">連結文字</a>
// 轉換PUG
a(href="網址") 連結文字
img(src="圖片網址",width="400px")

➤如果有很多屬性也能分多行寫

<input type="checkbox" name="chec"/>
// 轉換PUG
input(
	type='checkbox'
	name='check'
)

➤「｜」延續符號，在同一個層級，看起來會像h3後面接著純文字

<ul>
  <li>
    <h3>開放時間：</h3>今日正常營業
  </li>
</ul>
// 轉換PUG
ul
  li
    h3 開放時間：
    | 今日正常營業

➤註解

1.單行註解，會轉換成 <!-- -->

// 單行註解
h2.title.red pug前處理語言
#test 測試

<!-- 單行註解-->
<h2 class="title red">pug前處理語言</h2>
<div id="test">測試</div>

2.單行註解，但不顯示於html

//- 單行註解，但不顯示於html
h2.title.red pug前處理語言
#test 測試

<h2 class="title red">pug前處理語言</h2>
<div id="test">測試</div>

3.多行註解，須注意縮排

// 
  多行註解
  多行都可以
  多行都可以
  多行都可以
  多行都可以
h2.title.red pug前處理語言
#test 測試

<!-- 
多行註解
多行都可以
多行都可以
多行都可以
多行都可以
-->
<h2 class="title red">pug前處理語言</h2>
<div id="test">測試</div>

以上就是今天所介紹發現未來美好的PUG，新手一定要趕快學起來!!!